<template>
  <div class="banxin dt">
    <div class="dt_1 tanxin">
      <ul>
        <li>
          <a href>
            <div
              class="icon"
              style="background-image:url(https://p4.music.126.net/icULXvfqWJMFvcjTrXSLeA==/109951165406422565.jpg);  background-position: 0 0;  width: 48px;
                        height: 48px;    margin: 2px auto 0;"
            ></div>
            <em>情感</em>
          </a>
        </li>
        <li>
          <a href>
            <div
              class="icon"
              style="background-image:url(	https://p4.music.126.net/fWonYYR8sORR2mEKZfYqjQ==/109951165406418703.jpg); background-position: 0 0;  width: 48px;
                        height: 48px;    margin: 2px auto 0;"
            ></div>
            <em>音乐推荐</em>
          </a>
        </li>
        <li>
          <a href>
            <div
              class="icon"
              style="background-image:url(https://p4.music.126.net/Tg1Ids_gRSqaZXyZ3zj0Sg==/109951166109395795.jpg);  background-position: 0 0;  width: 48px;
                        height: 48px;    margin: 2px auto 0;"
            ></div>
            <em>有声书</em>
          </a>
        </li>
        <li>
          <a href>
            <div
              class="icon"
              style="background-image:url(	https://p4.music.126.net/LIkzDiW_ktaSbk_s6MgMkg==/109951165406441809.jpg);  background-position: 0 0;  width: 48px;
                        height: 48px;    margin: 2px auto 0;"
            ></div>
            <em>脱口秀</em>
          </a>
        </li>
        <li>
          <a href>
            <div
              class="icon"
              style="background-image:url(	https://p4.music.126.net/GqeTI3A_g4FFzm_4MoNSsQ==/109951165406411412.jpg);  background-position: 0 0;  width: 48px;
                        height: 48px;    margin: 2px auto 0;"
            ></div>
            <em>创造翻唱</em>
          </a>
        </li>
        <li>
          <a href>
            <div
              class="icon"
              style="background-image:url(https://p4.music.126.net/3qyLawhgmTyHNabhuaKYTg==/109951165406422635.jpg);  background-position: 0 0;  width: 48px;
                        height: 48px;    margin: 2px auto 0;"
            ></div>
            <em>电音</em>
          </a>
        </li>
        <li>
          <a href>
            <div
              class="icon"
              style="background-image:url(	https://p4.music.126.net/wOmtE80i2EMG2dR7DnTJUw==/109951166108735875.jpg);  background-position: 0 0;  width: 48px;
                        height: 48px;    margin: 2px auto 0;"
            ></div>
            <em>知识</em>
          </a>
        </li>
        <li>
          <a href>
            <div
              class="icon"
              style="background-image:url(	https://p3.music.126.net/X3gH1OSeg5xQV5bqSv-cEg==/109951166108614572.jpg);  background-position: 0 0;  width: 48px;
                        height: 48px;    margin: 2px auto 0;"
            ></div>
            <em>生活</em>
          </a>
        </li>
        <li>
          <a href>
            <div
              class="icon"
              style="background-image:url(https://p4.music.126.net/krSruAC4wwq3TXJkcSHvUQ==/109951166108617045.jpg);  background-position: 0 0;  width: 48px;
                        height: 48px;    margin: 2px auto 0;"
            ></div>
            <em>亲子</em>
          </a>
        </li>
        <li>
          <a href>
            <div
              class="icon"
              style="background-image:url(https://p3.music.126.net/OS8NVOBjZoznnOc5YSBy3w==/109951166108651181.jpg);  background-position: 0 0;  width: 48px;
                        height: 48px;    margin: 2px auto 0;"
            ></div>
            <em>新闻资讯</em>
          </a>
        </li>
        <li>
          <a href>
            <div
              class="icon"
              style="background-image:url(	https://p4.music.126.net/la9HvnMewT3lp72DL-NgKA==/109951166108675738.jpg);  background-position: 0 0;  width: 48px;
                        height: 48px;    margin: 2px auto 0;"
            ></div>
            <em>广播剧</em>
          </a>
        </li>
        <li>
          <a href>
            <div
              class="icon"
              style="background-image:url(	https://p3.music.126.net/4pgJFKZYNU1tZxQdp6xa-A==/109951166111062508.jpg);  background-position: 0 0;  width: 48px;
                        height: 48px;    margin: 2px auto 0;"
            ></div>
            <em>故事</em>
          </a>
        </li>
        <li>
          <a href>
            <div
              class="icon"
              style="background-image:url(https://p3.music.126.net/HXCbeAs1YDXgOOwE9oY2ew==/109951166111050278.jpg);  background-position: 0 0;  width: 48px;
                        height: 48px;    margin: 2px auto 0;"
            ></div>
            <em>人文历史</em>
          </a>
        </li>
        <li>
          <a href>
            <div
              class="icon"
              style="background-image:url(	https://p3.music.126.net/gFOkDDYZa8m93ccvIlmmvg==/109951166108686306.jpg);  background-position: 0 0;  width: 48px;
                        height: 48px;    margin: 2px auto 0;"
            ></div>
            <em>娱乐</em>
          </a>
        </li>
        <li>
          <a href>
            <div
              class="icon"
              style="background-image:url(	https://p3.music.126.net/bOFLdKG966TolZNpA1VYtw==/109951166108595279.jpg);  background-position: 0 0;  width: 48px;height: 48px;    margin: 2px auto 0;"
            ></div>
            <em>二次元</em>
          </a>
        </li>
        <li>
          <a href>
            <div
              class="icon"
              style="background-image:url(https://p4.music.126.net/hxNgvipzXFp570FgkiFGcQ==/109951166108605164.jpg);  background-position: 0 0;  width: 48px;
                        height: 48px;    margin: 2px auto 0;"
            ></div>
            <em>明星专区</em>
          </a>
        </li>
        <li>
          <a href>
            <div
              class="icon"
              style="background-image:url(	https://p4.music.126.net/BwIOmsgRTVLL1vrVieJD9w==/109951166108695116.jpg);  background-position: 0 0;  width: 48px;height:48px;margin: 2px auto 0;"
            ></div>
            <em>相声曲艺</em>
          </a>
        </li>
        <li>
          <a href>
            <div
              class="icon"
              style="background-image:url(	https://p4.music.126.net/W1j-Lb5ozohzud342aPIpw==/109951166108699096.jpg);  background-position: 0 0;  width: 48px;height:48px;margin: 2px auto 0;"
            ></div>
            <em>其他</em>
          </a>
        </li>
      </ul>
    </div>
    <div class="tanxin dt_2">
      <div class="dt_l">
        <div class="dt_l_nei">
          <h3>
            <a href>推荐节目</a>
          </h3>
          <a href>更多></a>
        </div>
        <ul>
          <li v-for="item, id in Recommend" :key="id">
            <a href>
              <img :src="item.coverUrl" alt />
            </a>
            <div class="div_1">
              <h3>
                <a href>{{ item.name }}</a>
              </h3>
              <p>
                <a href>{{ item.radio.name }}</a>
              </p>
              <a href class="a_1">{{ item.radio.category }}</a>
            </div>
          </li>
        </ul>
      </div>
      <div class="dt_r">
        <div class="dt_r_nei">
          <h3>
            <a href>节目排行榜</a>
          </h3>
          <a href>更多></a>
        </div>
        <ul>
          <li v-for="item, id in ProgramList" :key="id">
            <div class="div_1">
              <em>{{ item.rank }}</em>
            </div>
            <a href class="a_1">
              <img :src="item.program.coverUrl" alt />
            </a>
            <div class="div_2">
              <a
                href
                class="a_2"
                style="  font-size: 12px; text-decoration: none; color: #333;  display: block;margin: -10px 0;"
              >
                {{
                item.program.name
                }}
              </a>
              <p>
                <a
                  href
                  style="  font-size: 12px; text-decoration: none; color: #999;  display: block;margin: -18px 0;"
                >
                  {{
                  item.program.radio.name
                  }}
                </a>
              </p>
            </div>
            <span>
              <i>
                <i></i>
              </i>
            </span>
          </li>
        </ul>
      </div>
    </div>
    <div class="rdimore">
      <div class="rdimore_1">
        <h3>
          <span>
            <a href class="a_1">音乐推荐</a>
            <a href class="a_1">·</a>
            <a href class="a_1">电台</a>
          </span>
        </h3>
        <a href class="a_2">更多 ></a>
      </div>
      <ul>
        <li v-for="item, id in MusicRecommendation" :key="id">
          <a href class="a_3">
            <img :src="item.picUrl" alt />
          </a>
          <div>
            <h3>
              <p>{{ item.name }}</p>
            </h3>
          </div>
          <p style="  margin: 0 150px; font-size: 12px;">{{ item.rcmdtext }}</p>
        </li>
      </ul>
    </div>
    <div class="rdimore">
      <div class="rdimore_1">
        <h3>
          <span>
            <a href class="a_1">生活</a>
            <a href class="a_1">·</a>
            <a href class="a_1">电台</a>
          </span>
        </h3>
        <a href class="a_2">更多 ></a>
      </div>
      <ul>
        <li v-for="item, id in MusicRecommendation" :key="id">
          <a href class="a_3">
            <img :src="item.picUrl" alt />
          </a>
          <div>
            <h3>
              <p>{{ item.name }}</p>
            </h3>
          </div>
          <p style="  margin: 0 150px; font-size: 12px;">{{ item.rcmdtext }}</p>
        </li>
      </ul>
    </div>
    <div class="rdimore">
      <div class="rdimore_1">
        <h3>
          <span>
            <a href class="a_1">情感</a>
            <a href class="a_1">·</a>
            <a href class="a_1">电台</a>
          </span>
        </h3>
        <a href class="a_2">更多 ></a>
      </div>
      <ul>
        <li v-for="item, id in MusicRecommendation" :key="id">
          <a href class="a_3">
            <img :src="item.picUrl" alt />
          </a>
          <div>
            <h3>
              <p>{{ item.name }}</p>
            </h3>
          </div>
          <p style="  margin: 0 150px; font-size: 12px;">{{ item.rcmdtext }}</p>
        </li>
      </ul>
    </div>
    <div class="rdimore">
      <div class="rdimore_1">
        <h3>
          <span>
            <a href class="a_1">创作翻唱</a>
            <a href class="a_1">·</a>
            <a href class="a_1">电台</a>
          </span>
        </h3>
        <a href class="a_2">更多 ></a>
      </div>
      <ul>
        <li v-for="item, id in MusicRecommendation" :key="id">
          <a href class="a_3">
            <img :src="item.picUrl" alt />
          </a>
          <div>
            <h3>
              <p>{{ item.name }}</p>
            </h3>
          </div>
          <p style="  margin: 0 150px; font-size: 12px;">{{ item.rcmdtext }}</p>
        </li>
      </ul>
    </div>
    <div class="rdimore">
      <div class="rdimore_1">
        <h3>
          <span>
            <a href class="a_1">知识</a>
            <a href class="a_1">·</a>
            <a href class="a_1">电台</a>
          </span>
        </h3>
        <a href class="a_2">更多 ></a>
      </div>
      <ul>
        <li v-for="item, id in MusicRecommendation" :key="id">
          <a href class="a_3">
            <img :src="item.picUrl" alt />
          </a>
          <div>
            <h3>
              <p>{{ item.name }}</p>
            </h3>
          </div>
          <p style="  margin: 0 150px; font-size: 12px;">{{ item.rcmdtext }}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { Recommend, ProgramList, MusicRecommendation } from "@/request/api";
export default {
  data() {
    return {
      Recommend: [],
      ProgramList: [],
      MusicRecommendation: []
    };
  },
  created() {
    Recommend().then(res => {
      // console.log(res.data.programs);
      this.Recommend = res.data.programs;
    });
    ProgramList().then(res => {
      console.log(res.data.toplist);
      this.ProgramList = res.data.toplist;
    });
    MusicRecommendation().then(res => {
      console.log(res.data);
      this.MusicRecommendation = res.data.djRadios;
    });
  }
};
</script>
 
<style lang = "less" scoped>
@import "../assets/base.less";

.dt {
  min-height: 700px;
  margin: 0 auto;
  background-color: #fff;
  border: 1px solid #d3d3d3;
  border-width: 0 1px;

  .dt_1 {
    padding: 40px;
    margin-bottom: 20px;
    position: relative;
    zoom: 1;
    height: 194px;
    overflow: hidden;
    width: 900px;
    max-height: 194px;
    margin: 0 auto;

    ul {
      display: block;
      margin-left: -33px;

      li {
        float: left;
        margin: 0 0 25px 33px;

        a {
          display: block;
          width: 70px;
          height: 70px;
          background-position: 0 9999px;
          text-align: center;
          color: #888;
          text-decoration: none;

          em {
            margin-top: -3px;
            cursor: pointer;
            font-size: 12px;
          }
        }
      }
    }
  }

  .dt_2 {
    width: 900px;
    height: 643px;
    margin-top: 10px;

    .dt_2_left {
      width: 426px;

      .dt_2_left_shang {
        height: 40px;
        border-bottom: 2px solid #c20c0c;
      }
    }
  }

  .dt_2 {
    margin-top: 10px;
    width: 900px;
    height: 642px;
    margin: 0 100px;

    .dt_l {
      width: 426px;

      .dt_l_nei {
        height: 40px;
        border-bottom: 2px solid #c20c0c;

        h3 {
          float: left;

          font-weight: normal;

          a {
            cursor: pointer;
            text-decoration: none;
            color: #333;
            font-size: 24px;
          }
        }

        a {
          color: #666;
          cursor: pointer;
          float: right;
          margin-top: 14px;
          text-decoration: none;
          font-size: 12px;
        }
      }

      ul {
        width: 426px;
        height: 600px;
        border: 1px solid #e2e2e2;
        border-top: none;

        li {
          width: 424px;
          height: 40px;
          padding: 10px 10px;
          line-height: 40px;
          float: left;
          width: 100%;
          background: #fff;

          a {
            width: 40px;
            height: 40px;
            position: relative;
            display: block;
            float: left;
            cursor: pointer;
            text-decoration: none;
            color: #333;
            font-size: 12px;

            img {
              display: block;
              width: 100%;
              height: 100%;
            }
          }

          .div_1 {
            width: 254px;
            margin: 1px 0 0 10px;
            line-height: 20px;
            float: left;

            h3 {
              height: 20px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              word-wrap: normal;
              font-size: 100%;

              a {
                width: 300px;
                height: 16px;
                color: #333;
                font-weight: normal;
                cursor: pointer;
                text-decoration: none;
                vertical-align: middle;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                word-wrap: normal;
              }
            }

            p {
              height: 20px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              word-wrap: normal;

              a {
                color: #999;
                cursor: pointer;
                text-decoration: none;
              }
            }
          }

          .a_1 {
            float: right;
            display: inline-block;
            position: relative;
            top: -1px;
            height: 16px;
            overflow: hidden;
            padding: 0 6px;
            border: 1px solid #999;
            line-height: 16px;
            *line-height: 18px;
            color: #999;
            vertical-align: middle;
            font-size: 12px;
            margin: -15px -30px;
            width: 60px;
            text-align: center;
          }
        }
      }
    }
  }

  .dt_r {
    width: 426px;

    .dt_r_nei {
      height: 40px;
      border-bottom: 2px solid #c20c0c;

      h3 {
        float: left;

        font-weight: normal;

        a {
          cursor: pointer;
          text-decoration: none;
          color: #333;
          font-size: 24px;
        }
      }

      a {
        color: #666;
        cursor: pointer;
        float: right;
        margin-top: 14px;
        text-decoration: none;
        font-size: 12px;
      }
    }

    ul {
      height: 600px;
      border: 1px solid #e2e2e2;
      border-top: none;

      li {
        width: 424px;
        height: 40px;
        padding: 10px 0;
        line-height: 40px;
        float: left;
        background: #fff;

        .div_1 {
          width: 47px;
          margin: 6px 0 0 0;
          text-align: center;
          line-height: normal;
          color: #999;
          float: left;

          em {
            display: block;
            width: 100%;
            text-align: center;
            font-size: 14px;
            font-style: normal;
          }
        }

        .a_1 {
          width: 40px;
          height: 40px;
          position: relative;
          display: block;
          float: left;
          cursor: pointer;
          text-decoration: none;
          color: #333;

          img {
            display: block;
            width: 100%;
            height: 100%;
            cursor: pointer;
          }
        }

        .dvi_2 {
          width: 208px;
          margin: 1px 0 0 10px;
          line-height: 20px;
          float: left;

          .a_2 {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-wrap: normal;
            font-weight: normal;
            cursor: pointer;
          }

          p {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-wrap: normal;

            a {
              color: #999;
              cursor: pointer;
              text-decoration: none;
            }
          }
        }

        span {
          display: block;
          height: 8px;
          position: relative;
          width: 100px;
          background-position: 0 -240px;
          line-height: normal;
          background: url(../assets/image/table.png) no-repeat 0 9999px;
          float: left;

          i {
            width: 92%;
            overflow: hidden;
            padding: 0 4px;
            background-position: right -318px;
            display: block;
            height: 8px;
            background: url(../assets/image/table.png) no-repeat 0 9999px;

            i {
              margin-left: -4px;
              padding: 0 0 0 4px;
              background-position: 0 -304px;
              overflow: hidden;
              display: block;
              height: 8px;
              background: url(../assets/image/table.png) no-repeat 0 9999px;
            }
          }
        }
      }
    }
  }

  .rdimore {
    width: 900px;
    height: 364px;
    // background-color: pink;
    margin-top: 35px;
    margin: 30px 100px;

    .rdimore_1 {
      height: 40px;
      border-bottom: 2px solid #c20c0c;

      h3 {
        float: left;
        font-size: 24px;
        font-weight: normal;

        span {
          font-size: 24px;
          font-weight: normal;

          .a_1 {
            cursor: pointer;
            text-decoration: none;
            color: #333;
          }

          span {
            font-family: simsun, \5b8b\4f53;
          }
        }
      }

      .a_2 {
        text-decoration: none;
        font-size: 12px;
        float: right;
        margin-top: 14px;
        color: #666;
        cursor: pointer;
      }
    }

    ul {
      margin-left: -30px;

      li {
        float: left;
        width: 435px;
        height: 120px;
        margin-left: 30px;
        _margin-left: 15px;
        padding: 20px 0;
        border-bottom: 1px solid #e7e7e7;

        a {
          margin-right: -200px;
          width: 120px;
          height: 120px;
          position: relative;
          display: block;
          float: left;

          img {
            display: block;
            width: 100%;
            height: 100%;
          }
        }
      }

      div {
        margin-left: 140px;

        h3 {
          margin: 16px 0 20px;
          font-size: 18px;

          p {
            color: #333;
            font-weight: bold;
            height: 20px;
          }
        }
      }

      p {
        color: #999;
      }
    }
  }
}
</style>